<!--
  ~ This program is part of the OpenLMIS logistics management information system platform software.
  ~ Copyright © 2013 VillageReach
  ~
  ~ This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
  ~  
  ~ This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU Affero General Public License for more details.
  ~ You should have received a copy of the GNU Affero General Public License along with this program.  If not, see http://www.gnu.org/licenses.  For additional information contact info@OpenLMIS.org. 
  -->

<h2 id="viewRequisitionHeader" openlmis-message="header.view.requisitions" xmlns="http://www.w3.org/1999/html"></h2>
<form name="viewRequisitionForm" id="viewRequisitionForm"
      ng-submit="loadRequisitions()" novalidate>
  <div class="app-form view-req-form">
    <div class="row-fluid">
      <div class="span4">
        <label>
          <span openlmis-message="label.requisition.facilityName"></span>
          <span class="label-required"> *</span>
        </label>
        <select ui-select2 openlmis-message="facilityLabel"
                name="selectFacility"
                ng-model="selectedFacilityId" ng-required="true"
                ng-change="loadProgramsForFacility()">
          <option value=""></option>
          <option ng-repeat="facility in facilities | orderBy: 'name'"
                  value="{{ facility.id }}">{{ facility.code }} - {{
            facility.name }}
          </option>
        </select>
        <span class="field-error"
              ng-show="viewRequisitionForm.selectFacility.$error.required && errorShown"
              openlmis-message="error.select.value"></span>
      </div>
      <div class="span4">
        <label><span openlmis-message="label.program"></span></label>
        <select ui-select2 openlmis-message="programLabel"
                name="selectProgram" ng-model="selectedProgramId">
          <option value=""></option>
          <option ng-repeat="option in options" value="">{{ option.name }}</option>
          <option ng-repeat="program in programs | orderBy: 'name'"
                  value="{{ program.id }}">{{ program.name }}
          </option>
        </select>
      </div>
    </div>
    <div class="row-fluid">
      <div class="span4">
        <span openlmis-message="label.date.range"></span>

        <div class="row-fluid date-range">
          <div class="span6">
            <label for="startDate">
              <span openlmis-message="label.from"></span>
              <span class="label-required"> *&nbsp;</span>
            </label>
            <input name="startDate" id="startDate" type="text"
                   ui-date="{dateFormat: 'dd/mm/yy', changeYear: true}" ui-date-format="dd-mm-yy"
                   readonly ng-model="startDate"
                   ng-change="setEndDateOffset()" ng-required="true"/>

            <span class="field-error"
                  ng-show="viewRequisitionForm.startDate.$error.required && errorShown"
                  openlmis-message="error.select.value"></span>
          </div>
          <div class="span6">
            <label for="endDate">
              <span openlmis-message="label.to"></span>
              <span class="label-required"> *&nbsp;</span>
            </label>
            <input name="endDate" id="endDate" type="text"
                   ui-date="{minDate:endDateOffset, dateFormat: 'dd/mm/yy', changeYear: true}"
                   ui-date-format="dd-mm-yy"
                   readonly
                   ng-model="endDate" ng-required="true"
                   ng-disabled="!startDate"/>

            <span class="field-error"
                  ng-show="viewRequisitionForm.endDate.$error.required && errorShown"
                  openlmis-message="error.select.value"></span>
          </div>
        </div>
      </div>
    </div>
    <div class="row-fluid">
      <div class="span12">
        <input type="submit" class="btn btn-primary"
               openlmis-message="button.search"/>
      </div>
    </div>
  </div>
</form>
<div class="alert alert-info" id="noRequisitions" ng-show="requisitionFoundMessage"
     openlmis-message="requisitionFoundMessage">
</div>

<div ng-show="requisitions.length">
  <div class="row-fluid">
    <div class="span4 offset8 grid-filters">
      <input id="searchRequisition" class="search-query"
             ng-change="filterRequisitions()" type="text"
             ng-model="query"
             openlmis-message="placeholder.search.by.status"/>
    </div>
  </div>
  <div id='viewReqList' class="gridStyle" ng-grid="rnrListGrid"
       ng-show="requisitions.length"></div>
</div>